<template>
  <el-card class="box-card card-header">
    <div slot="header" class="clearfix f-medium">
      <i class="fa fa-th-list m-r-10 text-c-blue" aria-hidden="true"></i>
      <span>计划列表</span>
    </div>
    <TableCreator :colsConfig="columnConfig" :data="autoCruisePlans" stripe :height="320">
      <template #operation="{ row }">
        <el-button @click="setSail(row)" type="warning" size="small" plain>开始执行</el-button>
        <el-button @click="showRoute(row)" type="primary" size="small">生成路线</el-button>
      </template>
    </TableCreator>
  </el-card>
</template>

<script>
import { columnConfig } from '../config/planTableconfig'
import { mapState, mapGetters } from "vuex";
export default {
  name: "PlansList",
  data() {
    return {
      columnConfig
    };
  },
  async mounted() {
    await this.$store.dispatch("cruiseRecord/toGetPlansList");
  },
  computed: {
    ...mapState("cruiseManage", ["shipState"]),
    ...mapGetters("cruiseRecord", ["autoCruisePlans"]),
  },
  methods: {
    // 在地图上显示目标计划的路线
    showRoute(plan) {
      this.$bus.$emit("buildPlanMarkers", plan.positions);
    },
    // 开始执行某计划
    setSail(plan) {
      if (this.shipState == "自动巡航") {
        console.log(plan);
        this.$Notify('开始执行自动巡航');
      } else {
        this.$Notify('只能在自动巡航状态下执行！', 'warning');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.planTable {
  width: 100%;
}
</style>